<template>
  <div>
    <Header></Header>
    <router-view> </router-view>

    <div class="backGroundColor">
      <template>
        <div class="block">
          <el-carousel
            indicator-position="outside"
            trigger="click"
            class="bannerImage"
            height="400px"
          >
            <el-carousel-item v-for="(item, index) in image" :key="index">
              <el-image
                :src="item.src"
                @click="imageGo(item.src)"
                class="link"
              ></el-image>
            </el-carousel-item>
          </el-carousel>
        </div>
      </template>
      <el-row type="flex" justify="center">
        <el-col :span="12"
          ><div
            :class="addQuestionnaireStyle"
            @click="addQuestionnaire"
            @mouseover="mouseOver"
            @mouseleave="mouseleave"
          >
            Complete a Questionnaire Now!
          </div></el-col
        >
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="7"
          ><el-card class="box-card">
            <img src="@/assets/img/dataAnalysis.png" class="image" />
            <div class="fastEntry">Data analysis</div></el-card
          ></el-col
        >
        <el-col :span="7"
          ><el-card class="box-card"
            ><img
              src="@/assets/img/QuestionnaireManagement.png"
              class="image"
            />
            <div class="fastEntry">Questionnaire Management</div></el-card
          >
        </el-col>
        <el-col :span="7"
          ><el-card class="box-card"
            ><img src="@/assets/img/UserManagement.png" class="image" />
            <div class="fastEntry">User Management</div></el-card
          ></el-col
        >
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="20"
          ><el-card class="box-card2"><HomeStatistics></HomeStatistics></el-card
        ></el-col>
      </el-row>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
import HomeStatistics from "@/views/Home/HomeStatistics.vue";
import cookie from "js-cookie";
import api from "@/api/api.js";
export default {
  name: "Home",
  components: {
    Header,
    Footer,
    HomeStatistics,
  },
  data() {
    return {
      image: [
        { src: require("@/assets/img/banner02.jpg") },
        { src: require("@/assets/img/banner03.jpg") },
        { src: require("@/assets/img/banner01.jpg") },
      ],
      addQuestionnaireStyle: "addQuestionnaire",
      userInfo: {},
    };
  },
  created() {
    this.getInformation();
  },
  methods: {
    imageGo(address) {
      if (address == this.image[0].src) {
        //某个地址
      } else if (address == this.image[1].src) {
        //某个地址
      } else if (address == this.image[2].src) {
        //某个地址
      }
    },
    //如果手机号和微信邮箱没有绑定，跳转绑定
    getInformation() {
      let id = cookie.get("id");
      api
        .getUserInfo(id)
        .then((response) => {
          if (response.code == "200") {
            this.userInfo = response.body;
            if (this.userInfo.phone == "" || this.userInfo.email == "") {
              this.$router.push(
                `/systemManagement/personalInformation/${this.userInfo.id}`
              );
              this.$notify({
                title: "Please improve your personal information",
                position: "top-left",
                type: 'warning'
              });
            }
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    addQuestionnaire() {
      this.$router.push("/questionnaireManagement/newQuestionnaire");
    },
    mouseOver() {
      this.addQuestionnaireStyle = "addQuestionnaire1";
    },
    mouseleave() {
      this.addQuestionnaireStyle = "addQuestionnaire";
    },
  },
};
</script>

<style scoped lang="scss">
.backGroundColor {
  background: #bdbdbd42;
}
.addQuestionnaire {
  border-radius: 15px;
  border-style: solid;
  border-width: 1px;
  border-color: #707070;
  background: #64bbe742;
  margin: 15px auto;
  font-size: 45px;
  font-weight: 540;
  text-align: center;
  cursor: pointer;
}
.addQuestionnaire1 {
  border-radius: 15px;
  border-style: solid;
  border-width: 1px;
  border-color: #707070;
  background: #64bbe72d;
  margin: 15px auto;
  font-size: 45px;
  font-weight: 550;
  text-align: center;
  text-decoration: underline;
  cursor: pointer;
}

.box-card {
  border-radius: 25px;
  width: 425px;
  height: 270px;
  margin: 15px auto;
  background: #64bbe742;
  cursor: pointer;
}
.box-card2 {
  border-radius: 25px;
  width: 1530px;
  height: 650px;
  margin: 30px auto;
  background: #64bbe742;
}
.image {
  width: 80%;
  margin: 5px auto;
  display: block;
}
.link {
  cursor: pointer;
}
.block {
  width: 80%;
  margin: 0px auto;
}
.fastEntry {
  text-align: center;
  font-size: 25px;
  font-weight: 550;
}
</style>
<style>
.el-notification {
  width: 500px;
}
</style>